<template>
  <div class="helpCenters">
    <div class="botInfo">
      <banner />
    </div>
    <div class="min-container">
      <client-title title="帮助中心" class="content-title" />
      <div class="work">
        <el-row :gutter="0" v-for="(item, index) in dataList" class="item" :key="index">
          <el-col :span="24" :xs="24" :sm="24" :md="5" class="leftItme">
            {{ item.helpName || "无" }}
          </el-col>
          <el-col :span="24" :xs="24" :sm="24" :md="19" class="info">
            <span
              v-for="(sub, index) in item.children"
              :key="index"
              @click="handleDetail(sub)"
            >
              {{ sub.helpName || "无" }}
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <div class="botInfo">
    <contactUs/>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import ClientTitle from "@/components/client-title/client-title.vue";
import banner from "./banner/banner.vue";
import contactUs from '@/views/unit/contactUs.vue'
import { helpList } from "@/api/other";
import { useRouter } from "vue-router";
const router = useRouter();

const dataList = ref<any>([]);

onMounted(() => {
  getHelpList();
});

// 获取帮助中心列表
const getHelpList = () => {
  helpList({}).then((res: any) => {
    dataList.value = res.data;
  });
};

// 跳转详情
const handleDetail = (row: any) => {
  router.push({
    path: "/client/helpCenter/details",
    query: { helpId: row.helpId },
  });
};
</script>
<style scoped lang="less">
.content-title {
  margin: 30px;
}
.work {
  .item {
    border: 2px solid #fff;
    background: linear-gradient(180deg, #f5f7fa 0%, #fff 100%);
    box-shadow: 5px -5px 20px 0px #fff, -5px 5px 20px 0px #e3e8f0;
    height: 149px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .leftItme {
      text-align: center;
    }
    .info {
      color: #4098ff;
      font-size: 16px;
      span {
        line-height: 30px;
        margin-right: 26px;
        display: inline-block;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }
}
</style>
